import React, { useContext } from "react";
const ThemeContext = React.createContext();

const Son = () => {
  const theme = useContext(ThemeContext);
  return (
    <div>
      <h2>son</h2>
      {theme}
      {/* <ThemeContext.Consumer>
        {(value) => {
          return <div>{value}</div>;
        }}
      </ThemeContext.Consumer> */}
    </div>
  );
};

const Parent = () => {
  return (
    <div>
      <h2>parent</h2>
      <Son></Son>
    </div>
  );
};

export default function App() {
  return (
    <div>
      <h1>app</h1>
      <ThemeContext.Provider value="red">
        <Parent></Parent>
      </ThemeContext.Provider>
    </div>
  );
}
